<%--
  Created by IntelliJ IDEA.
  User: levi
  Date: 2020/4/15
  Time: 18:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>后台系统管理</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script src="../layui/layui.js"></script>
        <link rel="stylesheet" href="../layui/css/layui.css" media="all">
        <link rel="stylesheet" href="../layui/css/mystyle.css">
    </head>
    <body class="layui-layout-body">

        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo"><a href="../workbench.jsp"><img src="../imgs/logo.svg" alt=""></a></div>

                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href="javascript;;">
                            <img src="../imgs/avator.png" class="layui-nav-img">
                            <%=(String) session.getAttribute("user")%>
                        </a>
                    </li>
                    <li class="layui-nav-item"><a href="login.jsp">退出</a></li>
                </ul>
            </div>

            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item">
                            <a class="" href="user_administrator.jsp">用户管理</a>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">内容管理</a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;">作品管理</a></dd>
                                <dd><a href="javascript:;">日志管理</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item"><a href="partitions.jsp">分区管理</a></li>
                    </ul>
                </div>
            </div>

            <div class="layui-body">
                <!-- 右框内容主体区域 -->
                <div style="padding: 15px;">
                    <form class="layui-form" method="post">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" id="uname" placeholder="请输入用户名" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" id="nickname" placeholder="请输入昵称" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" id="upwd" placeholder="请输入密码" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-block">
                                <input type="email" name="email" placeholder="请输入邮箱" id="uemail" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <br>
                        <div class="layui-btn-container btn-container">
                            <button class="layui-btn layui-bg-purple" id="addUser" type="button">添加</button>
                            <button class="layui-btn layui-bg-purple" type="reset">清空</button>
                        </div>
                    </form>
                    <hr>
                    <br>
                    <table id="demo" lay-filter="test"></table>
                </div>
            </div>
            <div class="layui-footer">
                Copyright @2020 事前诸葛亮
            </div>
        </div>

        <script>
            layui.use('form', function () {
                var form = layui.form;
            });
            layui.use('element', function () {
                var element = layui.element;
            });
            var tableIns;
            layui.use('table', function () {
                var table = layui.table;
                //第一个实例
                tableIns = table.render({
                    elem: '#demo'
                    , height: 312
                    , url: 'manager/SelectUsers' //数据接口
                    , page: false //开启分页
                    , parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "count": res.count, //解析数据长度
                            "data": JSON.parse(res.data)
                        };
                    }
                    , cols: [[//表头
                            {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                            , {field: 'username', title: '用户名'}, {field: "email", title: "电子邮件地址"},
                            {fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo'}
                        ]]
                    , toolbar: true
                });
                //监听工具条 
                table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                    if (layEvent === 'del') { //删除
                        layer.confirm('真的删除行么', function (index) {
                            $.ajax({
                                url: "manager/DeleteUser",
                                type: "GET",
                                data: {userId: data.id},
                                success: function (resp) {
                                    if (resp.code === 0) {
                                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    } else {
                                        alert("error message is " + resp.errmsg);
                                    }
                                },
                                error: function (req, status, error) {
                                    alert("异常，错误信息：" + error);
                                    return false;
                                }
                            });
                            layer.close(index);
                        });
                    } else if (layEvent === 'update') {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                type: 1,
                                title: "重置密码",
                                content: `
                                <div class="pop-up">
                                    <label for="np">请输入新密码：</label><br>
                                    <input type="password" class="layui-input" id="np" placeholder="请输入密码">
                                </div>
                                <div class="pop-up">
                                    <label for="nnp">再次确认密码：</label><br>
                                    <input type="password" class="layui-input" id="nnp" placeholder="请再次输入密码">
                                </div>
                                <div id="msg"></div>`,
                                area: ['600px', '270px'],
                                offset: 'auto',
                                btn: ['确认'],
                                yes: function () {
                                    var np = document.querySelector('#np');
                                    var nnp = document.querySelector('#nnp');
                                    var msg = document.querySelector('#msg');
                                    if (np.value == nnp.value) {
                                        msg.innerHTML = '';
                                        $.ajax({
                                            url: "manager/UpdatePwd",
                                            type: "POST",
                                            data: {
                                                id: data.id,
                                                pwd: $('#np').val()
                                            },
                                            success: function (resp) {
                                                if (resp.code === 200) {
                                                    alert("重置密码成功");
                                                } else {
                                                    alert(resp.message);
                                                }
                                            },
                                            error: function (req, status, error) {
                                                alert("异常，错误信息：" + error);
                                            }
                                        });
                                        layer.closeAll();
                                    } else {
                                        msg.innerHTML = '两次输入的密码不一致';
                                        np.value = '';
                                        nnp.value = '';
                                    }
                                },
                                closeBtn: 1
                            });
                        })
                    }
                });
            });
            $(document).ready(function () {
                $('#addUser').click(function () {
                    $.ajax({
                        url: "manager/AddUser",
                        type: "POST",
                        data: {
                            name: $('#uname').val(),
                            password: $('#upwd').val(),
                            email: $('#uemail').val()
                        },
                        success: function (jsonarry) {
                            alert("添加成功");
                            tableIns.reload();
                        },
                        error: function (req, status, error) {
                            alert("异常，错误信息：" + error);
                        }
                    });
                });
            });
        </script>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="update" class="update">重置密码</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" class="del">删除</a>
        </script>
    </body>
</html>